require("../../both/base.js");

require("./AdminCourseCtrl.scss");
import Popup from "../../both/Popup/Popup.jsx"

const  PropTypes = React.PropTypes
import DataTable from "../DataTabel/DataTable.jsx";

const majors = ["全部","嵌入式","Web","Android","IOS","UI"]

// todo : 这里应该把DataTable变成DataTableContainer，有对应的reducers
class AdminCourseCtrl extends React.Component{
    constructor(props){
        super(props)

        const {init} = this.props
        init()

        this.state = {
            modalState : false,
            title : "",
            description : "",
            major : majors[0],
            cover : `${location.protocol}//${location.hostname}:${location.port}/p_dist/default.jpg`,
            videoUrl : `${location.protocol}//${location.hostname}:${location.port}/p_dist/default.mp4`
        }

        // this.addDisable = false
    }

    /**
     * 触发按实验室学习方向筛选，给button添加颜色
     * @param e
     */
    filterWrap(e){
        const {filter} = this.props

        var li = e.target
        var lists = Array.prototype.concat.apply([],li.parentNode.childNodes)
        var idx = lists.indexOf(li)
        filter(majors[idx])

        for(var i in lists){
            lists[i].className = lists[i].className.replace(/cur/gi,"")
        }
        li.className += "cur"
    }

    addCourseWrap(){
        if(this.addDisable){
            return
        }

        const {addCourse} = this.props
        const hideModal = this.hideModal.bind(this)

        if(this.state.title == "" || this.state.description == ""){
            toastr.warning("值不合法")
            return
        }

        addCourse({
            title : this.state.title,
            cover : this.state.cover,
            description : this.state.description,
            major : this.state.major,
            location : this.state.videoUrl
        })

        hideModal()
        toastr.success("添加成功")
    }

    titleInputChange(e){
        this.setState({
            title : e.target.value
        })
    }

    descriptionChange(e){
        this.setState({
            description : e.target.value
        })
    }

    directConfirm(e){
        var li = e.target
        var lists = li.parentNode.childNodes
        var idx = Array.prototype.indexOf.call(lists,li)

        this.setState({
            major : majors[idx]
        })
    }

    showModal(){
        if(this.addDisable){
            return
        }

        this.setState({
            modalState : true
        })
        this.forceUpdate()
    }

    hideModal(){
        this.setState({
            modalState : false
        })
        this.forceUpdate()
    }

    componentDidMount(){
        var self = this
        var uploader = this.uploader = WebUploader.create({
            auto: true,
            pick: '#filePicker',
            server: `${location.protocol}//${location.hostname}:${location.port}/postFile`,
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*',
            }
        })

        uploader.on( 'uploadSuccess', function( file, res) {
            toastr.success("图片上传成功")
            self.setState({
                cover : res.url
            })
        })

        uploader.on( 'uploadError', function( file ) {
            toastr.error("图片上传失败")
        })
    }

    render(){
        var self = this
        const filterWrap = this.filterWrap.bind(this)
        // interface func
        const titleInputChange = this.titleInputChange.bind(this)
        const descriptionChange = this.descriptionChange.bind(this)
        const directConfirm = this.directConfirm.bind(this)
        const hideModal = this.hideModal.bind(this)
        const showModal = this.showModal.bind(this)
        const addCourseWrap = this.addCourseWrap.bind(this)

        // data ths
        const ths = ["课程id","课程名称","课程介绍","课程封面图片","课程方向","视频预览"]

        // data trs
        const trs = self.props.courses.map((ele,idx) => {
            return <tr key={ele.id.toString()}>
                <td><div className="text-center item"><label>
                    <input id="radio_input_select" className="radio" type="checkbox" name="filter"/>
                    <span data-id={ele.id} className="radio_input"></span>
                </label></div></td>
                <td><div className="item">{ele.id}</div></td>
                <td><div className="item">{ele.title}</div></td>
                <td><div className="item">{ele.description}</div></td>
                <td><div className="item"><img className="datatable_img" src={ele.cover} alt=""/></div></td>
                <td><div className="item">{ele.major}</div></td>
                <td><div className="item"><a href={ele.location}>点击预览</a></div></td>
            </tr>
        })

        return (
            <div className="admin_course_ctrl bln">
                <div className="course_ctrl_title">
                    <div className="course_ctrl_ul_lf">
                        <span>课程管理</span>
                        <ul className="ul_filter" id="ul_filter" onClick={filterWrap}>
                            {majors.map((e,i) => {
                                return (
                                    <li key={i} className={i == 0 ? "cur" : ""}>{e}</li>
                                )
                            })}
                        </ul>
                    </div>
                    <div className="course_ctrl_ul_lr">
                        {/*<span><a href="#">课程管理使用指南<i className="fa fa-external-link"></i></a></span>*/}
                    </div>
                </div>

                {/*{解构传递}*/}
                <DataTable {...self.props}
                           ths={ths}
                           trs={trs}
                           searchPlaceHolder={"输入课程名称进行搜索"}
                           showModal={showModal}
                           editHref="/admin/course_edit?courseId="
                />

                <Popup show={this.state.modalState} title="添加课程" onOk={addCourseWrap} onCancel={hideModal}>
                    <div className="modal_course_info_edit">
                        <ul className="modal_lists">
                            <li>
                                <span className="item_title">课程名称</span>
                                <span className="edit_area"><input type="text" className="input_edit_item" value={this.state.title} onChange={titleInputChange} /></span>
                            </li>
                            <li>
                                <span className="item_title">课程简介</span>
                                <span className="edit_area"><textarea type="text" className="input_edit_item" value={this.state.description} onChange={descriptionChange}/></span>
                            </li>
                            <li>
                                <span className="item_title">
                                    封面图片
                                </span>
                                <span className="edit_area">
                                    <div className="img_op_cr verticle_middle_wr">
                                        <img className="img_thumb"
                                             src={this.state.cover}
                                             alt="pic"/>
                                        <div className="img_mask_op">
                                            <div className="img_op">
                                                <div className="btn btn-primary" id="filePicker">
                                                    替换
                                                </div>
                                                {/*<div className="btn btn-danger">删除</div>*/}
                                            </div>
                                            <div className="img_mask"></div>
                                        </div>
                                    </div>
                                </span>
                            </li>
                            <li>
                                <span className="item_title">
                                    专业方向
                                </span>
                                <span className="edit_area">
                                    <div className="btn_group">
                                        <ul className="ul_filter" id="ul_filter" onClick={directConfirm}>
                                            {majors.map((e,i) => {
                                                return (
                                                    <li key={i} className={majors.indexOf(self.state.major) == i ? "cur" : ""}>{e}</li>
                                                )
                                            })}
                                        </ul>
                                    </div>
                                </span>
                            </li>
                            <li></li>
                        </ul>
                    </div>
                </Popup>

            </div>
        )
    }
}

AdminCourseCtrl.propTypes = {
    init : PropTypes.func.isRequired,
    sort : PropTypes.func.isRequired,
    refresh : PropTypes.func.isRequired,
    search : PropTypes.func.isRequired,
    changePage : PropTypes.func.isRequired,
    selectCourse : PropTypes.func.isRequired,
    move : PropTypes.func.isRequired,

    courses : PropTypes.array.isRequired,
    totalCount : PropTypes.number.isRequired,
    cachedCourses : PropTypes.array.isRequired,
    selectedCourses : PropTypes.array.isRequired,
    limit : PropTypes.number.isRequired,
    page : PropTypes.number.isRequired
}

export default AdminCourseCtrl